<template>
  <div>counter:{{counter}}</div>
  <div>doubleCount:{{doubleCount}}</div>
  <van-button @click="main.randomizeCounter()">counter(round)</van-button>
  <van-button type="primary" @click="main.increment()">counter++</van-button>

  <div>{{name}}</div>
  <van-button @click="amend()">修改</van-button>
</template>

<script setup lang="ts">
import { useMain } from '../store/index'
const a = ref(1)
const main = useMain()
// 解构main里面的state和getters的数据，
// 使用storeToRefs解构才有响应式，响应式可以直接修改数据，不过这我只用来渲染
const { counter,name ,doubleCount } = storeToRefs(main)
 
//（常用方法三种）
//常用方法一： 使用数据
console.log( counter );
//使用方法(方法目前不能解构)
main.increment()

 
//常用方法三：
//进阶使用$patch，多个修改
const amend=()=>{
  main.$patch((state) => {
    state.counter += 10;
    state.name = '张三'
  })
}
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
